<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>仪表盘</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 内容滚动主体区 -->
        <div :style="innerStyle">
            <el-scrollbar style="height: 100%">

                <el-alert style="margin-bottom: 5px; border: 1px dotted lightgreen;" 
                    title="欢迎使用数据库集群管理平台（版本号：v1.0.0）" 
                    type="success" 
                    show-icon center>
                </el-alert>

                <!-- 仪表盘统计区 -->
                <div class="cluster-box">
                    <div class="cluster-box-info">
                        <div class="header" style="background-color: #36CFCA;">
                            <img src="../../assets/icons/cluster_32x32.png" alt="">
                        </div>
                        <div class="content">
                            <h5>总集群数</h5>
                            <p>- {{clusterCountTotal}} -</p>
                        </div>
                    </div>
                    <div class="cluster-box-info">
                        <div class="header" style="background-color: #42A7FF;">
                            <img src="../../assets/icons/cluster_32x32.png" alt="">
                        </div>
                        <div class="content">
                            <h5>有效集群数</h5>
                            <p>- {{clusterCountUsed}} -</p>
                        </div>
                    </div>
                    <div class="cluster-box-info">
                        <div class="header" style="background-color: #FFC53D;">
                            <img src="../../assets/icons/cluster_32x32.png" alt="">
                        </div>
                        <div class="content">
                            <h5>闲置集群数</h5>
                            <p>- {{clusterCountIdle}} -</p>
                        </div>
                    </div>
                    <div class="cluster-box-info">
                        <div class="header" style="background-color: #FD4D4F;">
                            <img src="../../assets/icons/cluster_32x32.png" alt="">
                        </div>
                        <div class="content">
                            <h5>异常集群数</h5>
                            <p>- {{clusterCountEx}} -</p>
                        </div>
                    </div>
                </div>


                <!-- 仪表盘列表区 -->
                <div class="list-box">
                    <el-card shadow="hover" class="list-box-info">
                        <div slot="header" class="clearfix">
                            <i class="el-icon-menu"></i> <span>集群信息</span>
                            <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
                        </div>
                        <el-table :data="tableDataCluster" style="width: 100%" :show-header="false">
                            <el-table-column prop="content" label="内容">
                                <template slot-scope="scope">
                                    <i class="el-icon-menu"></i>
                                    <span style="margin-left: 10px">{{ scope.row.content }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <el-card shadow="hover" class="list-box-info">
                        <div slot="header" class="clearfix">
                            <i class="el-icon-message-solid"></i> <span>消息统计</span>
                            <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
                        </div>
                        <el-table :data="tableDataMessage" style="width: 100%" :show-header="false">
                            <el-table-column prop="content" label="内容">
                                <template slot-scope="scope">
                                    <i class="el-icon-message-solid"></i>
                                    <span style="margin-left: 10px">{{ scope.row.content }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <el-card shadow="hover" class="list-box-info">
                        <div slot="header" class="clearfix">
                            <i class="el-icon-s-opportunity"></i> <span>近期事件</span>
                            <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
                        </div>
                        <el-table :data="tableDataEvent" style="width: 100%" :show-header="false">
                            <el-table-column prop="content" label="内容">
                                <template slot-scope="scope">
                                    <i class="el-icon-s-opportunity"></i>
                                    <span style="margin-left: 10px">{{ scope.row.content }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>

                    <el-card shadow="hover" class="list-box-info">
                        <div slot="header" class="clearfix">
                            <i class="el-icon-user-solid"></i> <span>操作历史</span>
                            <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
                        </div>
                        <el-table :data="tableDataHistory" style="width: 100%" :show-header="false">
                            <el-table-column prop="content" label="内容">
                                <template slot-scope="scope">
                                    <i class="el-icon-info"></i>
                                    <span style="margin-left: 10px">{{ scope.row.content }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data: function () {
        return {
            clusterCountTotal: 13,
            clusterCountUsed: 4,
            clusterCountIdle: 9,
            clusterCountEx: 0,
            tableDataCluster: [
                {
                    content: '11-11 12:16 cluster_ora 节点失联'
                },
                {
                    content: '11-08 17:23 cluster_pg 网络延迟'
                },
                {
                    content: '10-16 12:16 cluster_home '
                },
                {
                    content: '10-16 12:16 cluster_kingbase'
                }
            ],
            tableDataMessage: [
                {
                    content: '11-11 12:16 预警消息 122 个'
                },
                {
                    content: '11-08 17:23 集群消息 262 个'
                },
                {
                    content: '10-16 12:16 向导消息 62 个'
                }
            ],
            tableDataEvent: [
                {
                    content: '11-11 12:16 [切换] node01'
                },
                {
                    content: '11-08 17:23 [监控] node01'
                },
                {
                    content: '10-16 12:16 [监控] cluster_ora'
                },
                {
                    content: '10-13 10:22 [预警] template_ora'
                }
            ],
            tableDataHistory: [
                {
                    content: '11-11 12:16 [删除节点] node01'
                },
                {
                    content: '11-08 17:23 [部署节点] node01'
                },
                {
                    content: '10-16 12:16 [添加集群] cluster_ora'
                },
                {
                    content: '10-13 10:22 [添加模板] template_ora'
                },
                {
                    content: '10-11 11:11 [添加监控] monitorServ1'
                }
            ]
        }
    },
    computed: {
        ...mapGetters(['getInnerSize']),
        innerStyle: function () {
            return `height: ${this.getInnerSize.height - 160}px; overflow: auto;`;
        }
    },
    methods: {
        changeSize: function () {
            this.innerHeight = 500;
        }
    }
}
</script>

<style lang="less" scoped>

    // 仪表盘统计区
    .cluster-box {
        display: flex;
    }

    .cluster-box .cluster-box-info {
        flex: 1;
        border: 1px solid lightgray;
        background-color: #FAFAFA;
        border-radius: 5px;
        height: 60px;
        margin: 0 2px 5px 2px;
        display: flex;
    }

    .cluster-box .cluster-box-info .header {
        width: 100px;
    }

    .cluster-box .cluster-box-info .header img {
        margin: 15px 34px;
    }

    .cluster-box .cluster-box-info .content {
        flex: 1;
        flex-direction: column;
    }

    .cluster-box .cluster-box-info .content h5 {
        height: 25px;
        line-height: 25px;
        margin: 0px;
        text-align: center;
        font-weight: 200;
        font-size: 12px;
    }

    .cluster-box .cluster-box-info .content p {
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 26px;
        margin: 0px;
        font-weight: 700;
        color: gray;
        margin-top: -5px;
    }

    // 仪表盘列表区
    .list-box {
        display: flex;
        height: 500px;
    }

    .list-box .list-box-info {
        flex: 1;
        margin: 0 2px 2px 2px;
    }
</style>